import React, { Component } from 'react';
import axios from 'axios';
class View extends Component {
    constructor(props){
        super(props);
        /**
            挂载前 初始化 state值
            和接下来事件  邦定事件实例
        */
        this.state = {
            title:'页面title',
            skuid:'59'
        }
        console.log('constructor')
    }
    async getApi(url,cfg,headers){
        let	data = await axios.get(url,{params:cfg},
        {
            headers: headers
        })
        return data;
    }
    getHome(){
        const cfg = {
            page_number:'2',
            page_size:'10'
        };
        this.getApi('/home/mediareports',cfg,{}).then((res)=>{
            this.setState({
                title:'react 生命周期 更新 state',
            })
        })
    }
    getWp(){
        this.getApi('/wp-json/wp/v2/posts',{},{}).then((res)=>{
            console.log(res.data)
        })
    }
    componentDidMount(){
        this.getHome();
        console.log('DidMount');
        // this.timer = setTimeout(()=>{
        //     this.setState({
        //         title:'react 生命周期 更新 state'
        //     })
        // },3000)
    }
    componentDidUpdate(prevProps,prevState){
        console.log('DidUpdate')
        console.log(`prop:${this.props.skuid},state:${this.state.skuid},prevProps:${prevProps.skuid},prevState:${prevState.skuid}`)
        if(this.state.skuid!==prevProps.skuid){
            this.getWp();
        }
    }
    componentWillUnmount(){
        console.log('WillUnmount');
        clearTimeout(this.timer);
    }
    render(){
        console.log('render')
        // 纯函数
        return(
            <div className="life">
                这是生命周期页面
                <div>{this.state.title}</div>
            </div>
        )
    }
}

export default View;
